<!DOCTYPE html>
<html lang="zh-CN">
<#include "../../common/head.ftl">
<body>
<h1 class="text text-info">模态框插件</h1>

<#--
fade:表示模态框会有淡入淡出效果;

tabindex:值设置为-1的话,表示取消焦点(比如如果焦点不在模态框上的话,
        按esc键不会关闭模态框,只有焦点在模态框上面,按esc键模态框才会关闭,
        当然,要看到这个效果的前提是你没有在按钮上使用data-keyboard=false来禁用键盘事件);

data-dismiss:值为modal表示点击可以关闭模态框;
-->
<div class="modal fade" id="mymodal1" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4 class="modal-titile">
                    这是标题1
                </h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="col-md-4">内容1</div>
                    <div class="col-md-4">内容1</div>
                    <div class="col-md-4">内容1</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default">按钮1</button>
                <button class="btn btn-default">按钮1</button>
            </div>
        </div>
    </div>
</div>

<#--
data-toggle:值为modal表示点击按钮将弹出一个模态框;
data-target:值为一个模态框的id,表示要弹出哪个模态框;
data-backdrop:
    值为static时,模态框周围有黑色透明遮罩,且点击空白处模态框不会消失;
    若值为false,则没有黑色透明遮罩且点击空白处模态框不会关闭;
data-keyboard:值为false表示按esc键的时候模态框不会关闭;
-->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal1" data-backdrop="static" data-keyboard="false">点击弹出模态框1</button>

<#include "../../common/footer.ftl">
</body>
</html>